
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>

    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-mini" lay-event="check">审核</a>
    {{#  } }}
</script>
<table id="testTable" lay-filter="test"></table>
<#include "/shared/style.ftl" />
<#include "/shared/javascript.ftl" />
<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#testTable',
            url: '${baseUrlAdmin}/category/listAjax',
            method: 'post',
            page: true,
            limits: [2, 10, 30, 60, 90, 150, 300],
            limit: 10,
            request: {pageName: 'pageIndex', limitName: 'pageSize'},
            response: {
                statusName: 'code',   //数据状态的字段名称，默认：code
                statusCode: 0,        //成功的状态码，默认：0
                msgName: 'message',        //状态信息的字段名称，默认：msg
                countName: 'total',     //数据总数的字段名称，默认：count
                dataName: 'data'        //数据列表的字段名称，默认：data
            },
            loading: true,
            even: true,
            size: 'sm',
            cols: [[
                {checkbox: true, LAY_CHECKED: true},
                {field: 'id', title: 'ID', width: 80, align: 'center'},
                {field: 'name', title: '名称', width: 120, align: 'center'},
                {field: 'parentName', title: '上一级', width: 150, align: 'center'},
                {field: 'navShow', title: '首页导航', width: 100, align: 'center'},
                {field: 'createTime', title: '添加时间', width: 200, align: 'center'},
                {field: 'updateTime', title: '修改时间', width: 200, align: 'center'},
                {field: 'userName', title: '操作用户', width: 100, align: 'center'},
                {field: 'status', title: '状态', width: 100, align: 'center'},
                {title: '操作', fixed: 'right', width: 150, align: 'center', toolbar: '#barDemo'}
            ]]
        });

        //监听工具条
        table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            var index = tr.data('index');
            if (layEvent === 'detail') { //查看
                console.log('查看 第' + index + '行');
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') { //编辑
                console.log('编辑 第' + index + '行');
                //同步更新缓存对应的值
                obj.update({
                    name: '123',
                    parentName: 'xxx'
                });
            }
        });

    });
</script>